import React, { useState, forwardRef, useImperativeHandle } from 'react';
import { Modal, Form, Input, Button, message } from 'antd';
import { editCardNickname } from '@/api/modules/card';

/**
 * 编辑昵称组件属性接口
 * 定义组件接收的props类型
 */
interface EditNicknameProps {
  onRefresh: () => void; // 刷新回调函数，修改成功后调用以更新父组件数据
}

/**
 * 编辑昵称引用接口
 * 定义通过ref暴露给父组件的方法
 */
export interface EditNicknameRef {
  show: (cardId: number, currentNickname: string) => void; // 显示模态框方法
  close: () => void; // 关闭模态框方法
}

/**
 * 编辑昵称组件
 * 用于修改卡片昵称的模态框表单，通过ref暴露方法给父组件
 * @param props 组件属性
 * @returns React组件
 */
const EditNickname = forwardRef<EditNicknameRef, EditNicknameProps>(({ onRefresh }, ref) => {
  const [form] = Form.useForm(); // Ant Design表单实例
  const [modalVisible, setModalVisible] = useState(false); // 模态框显示状态
  const [modalLoading, setModalLoading] = useState(false); // 模态框加载状态
  const [currentCardId, setCurrentCardId] = useState<number | null>(null); // 当前卡片ID状态

  /**
   * 暴露方法给父组件
   * 使用useImperativeHandle自定义ref暴露的值
   */
  useImperativeHandle(ref, () => ({
    /**
     * 显示模态框并设置初始数据
     * @param cardId 卡片ID
     * @param currentNickname 当前昵称
     */
    show: (cardId: number, currentNickname: string) => {
      setCurrentCardId(cardId); // 设置卡片ID
      form.setFieldValue('nickname', currentNickname); // 设置表单字段值为当前昵称
      setModalVisible(true); // 显示模态框
    },
    /**
     * 关闭模态框并重置状态
     */
    close: () => {
      setModalVisible(false); // 关闭模态框
      form.resetFields(); // 重置表单字段
      setCurrentCardId(null); // 清空卡片ID
    }
  }));

  /**
   * 处理表单提交
   * 修改卡片昵称
   */
  const handleSubmit = async () => {
    try {
      const values = await form.validateFields(); // 验证表单字段
      setModalLoading(true); // 开始加载

      if (currentCardId) {
        // 调用API修改昵称
        await editCardNickname({
          id: currentCardId, // 卡片ID
          card_json: {
            nickname: values.nickname // 新昵称
          }
        });
        message.success('昵称修改成功'); // 成功提示
        setModalVisible(false); // 关闭模态框
        onRefresh(); // 调用刷新回调
      }
    } catch (error) {
      console.error('修改昵称失败:', error);
      message.error('修改昵称失败'); // 错误提示
    } finally {
      setModalLoading(false); // 结束加载
    }
  };

  /**
   * 关闭模态框
   * 重置表单和状态
   */
  const handleClose = () => {
    setModalVisible(false); // 关闭模态框
    form.resetFields(); // 重置表单字段
    setCurrentCardId(null); // 清空卡片ID
  };

  return (
    <Modal
      title="编辑卡片昵称" // 模态框标题
      open={modalVisible} // 控制模态框显示
      onCancel={handleClose} // 取消回调
      footer={[
        <Button key="cancel" size="large" disabled={modalLoading} onClick={handleClose}>
          取消 {/* 取消按钮 */}
        </Button>,
        <Button
          key="submit"
          type="primary"
          size="large"
          loading={modalLoading}
          onClick={handleSubmit}
        >
          确认修改 {/* 确认修改按钮 */}
        </Button>
      ]}
      width={500} // 模态框宽度
    >
      {/* Ant Design表单组件 */}
      <Form
        form={form} // 绑定表单实例
        layout="vertical" // 垂直布局
        size="large" // 大尺寸
      >
        {/* 昵称输入字段 */}
        <Form.Item
          name="nickname" // 字段名
          label="卡片昵称" // 标签
          rules={[
            { required: true, message: '请输入卡片昵称' }, // 必填验证
            { max: 20, message: '昵称长度不能超过20个字符' } // 最大长度验证
          ]}
        >
          <Input placeholder="请输入卡片昵称" maxLength={20} /> {/* 输入框，限制最大长度 */}
        </Form.Item>
      </Form>
    </Modal>
  );
});

export default EditNickname; // 导出组件